<ui:component xmlns="http://www.w3.org/1999/xhtml"
              xmlns:ui="http://java.sun.com/jsf/facelets"
              xmlns:h="http://java.sun.com/jsf/html"
              xmlns:c="http://java.sun.com/jstl/core"
              xmlns:f="http://java.sun.com/jsf/core"
              xmlns:rich="http://richfaces.org/rich"
              xmlns:a4j="http://richfaces.org/a4j"
        >

    <!--@elvariable id="conversation" type="rs.contacts.mail.ui.data.ConversationDataExt"-->

    <style type="text/css">
        .rich-stglpanel {
            border-top: 0;
            border-bottom: 0;
        }
    </style>

    <h:form id="messages_form_#{conversation.uniqueKey}">

        <c:forEach items="#{conversation.messageDatas}" var="message">
            <!--onclick="shElement('messages_form_#{conversation.uniqueKey}:headerTo_#{message.uniqueKey}', 'inline');"-->
            <rich:simpleTogglePanel switchType="client" opened="#{not message.readed}">
                <f:facet name="header">
                    <h:panelGroup>
                        <h:outputText value="#{(conversation.participantsMap[message.senderMail]).info.firstName}"/>
                        <h:outputText value="#{message.messageDate}" style="float:right;margin-right:10px;">
                            <f:converter converterId="timeLapseConvertor"/>
                        </h:outputText>
                        <!---->
                        <!--<h:outputText id="headerTo_#{message.uniqueKey}" value=" to #{message.receiversMails}" style="display:#{message.readed ? 'none' : 'inline'}"/>-->
                    </h:panelGroup>
                </f:facet>

                <h:outputText value="#{message.messageBody}" escape="false"/>

            </rich:simpleTogglePanel>
        </c:forEach>

    </h:form>

    <!--<script type="text/javascript" language="JavaScript">-->
    <!--function shElement(elementId, disp)-->
    <!--{-->
    <!--var elem = document.getElementById(elementId);// #{rich:element(elementId)};-->

    <!--if (disp == null)-->
    <!--disp = 'block';-->

    <!--if (elem.style.display == 'none')-->
    <!--elem.style.display = disp;-->
    <!--else-->
    <!--elem.style.display = 'none';-->
    <!--}-->
    <!--</script>-->

    <rich:simpleTogglePanel label="#{resources.conversationReplayLabel}" switchType="ajax" ajaxSingle="true" opened="false">
    <h:form>
        <ui:include src="compose.xhtml">
            <ui:param name="showTopic" value="false"/>
            <ui:param name="showReceivers" value="false"/>
            <ui:param name="parentKey" value="#{conversation.parentId}"/>
        </ui:include>
        <h:panelGroup layout="block" style="text-align:right">
            <a4j:commandButton value="#{resources.composeSendButton}" reRender="massageTabs" action="#{createMessageBean.send}"
                               oncomplete="RichFaces.switchTab('#{rich:clientId('massageTabs')}', selectedTab,'');">
                <f:setPropertyActionListener value="#{conversation.subject}" target="#{createMessageBean.topic}"/>
                <f:setPropertyActionListener value="#{conversation.participants}"
                                             target="#{createMessageBean.receivers}"/>
                <f:setPropertyActionListener value="#{conversation.parentId}" target="#{createMessageBean.parentId}"/>
            </a4j:commandButton>
            <a4j:commandButton value="#{resources.composeDiscardButton}" type="reset"
                               oncomplete="RichFaces.switchTab('#{rich:clientId('massageTabs')}', selectedTab,'');"/>
        </h:panelGroup>
    </h:form>
    </rich:simpleTogglePanel>

</ui:component>